<template>
    <div :class='$style.container'>
        <div :class='left'>
            <a-menu mode='inline'>
                <a-menu-item :key='tabList[0].key'>{{tabList[0].tab}}</a-menu-item>
                <a-menu-item :key='tabList[1].key'>{{tabList[1].tab}}</a-menu-item>
                <a-menu-item :key='tabList[2].key'>{{tabList[2].tab}}</a-menu-item>
                <a-menu-item :key='tabList[3].key'>{{tabList[3].tab}}</a-menu-item>
                <a-menu-item :key='tabList[4].key'>{{tabList[4].tab}}</a-menu-item>
            </a-menu>
        </div>
        <div :class='right'>
            <div v-show='tabKey == 1'>
                <Tab1 />
            </div>
            <div v-show='tabKey == 2'>
                <template v-if='tabKey2Init'>
                    <Tab2 />
                </template>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import { strategyBackTestProcessApi } from '@/api/strategy'
    import Tab1 from './Tab1.vue'
    import Tab2 from './Tab2.vue'
    import Tab3 from './Tab3.vue'
    import Tab4 from './Tab4.vue'
    import Tab5 from './Tab5.vue'

    const props = defineProps<{
        taskId:number
    }>()

    const tabKey = ref(1)
    const tabKey2Init = ref(false)
    const tabKey3Init = ref(false)
    const tabKey4Init = ref(false)
    const tabKey5Init = ref(false)

    const tabList = reactive([
      {
        key: 1,
        tab: '收益概述',
      },
      {
        key: 2,
        tab: '收益概述',
      },
      {
        key: 3,
        tab: '每日持仓&收益',
      },
      {
        key: 4,
        tab: '策略收益&收益',
      },
      {
        key: 5,
        tab: '基准收益',
      },
    ]);

    function setTabKey(key) {
        tabKey.value = key
        if(key == 2 && tabKey2Init.value == false) {
            tabKey2Init.value = true
        }

        if(key == 3 && tabKey3Init.value == false) {
            tabKey3Init.value = true
        }

        if(key == 4 && tabKey4Init.value == false) {
            tabKey4Init.value = true
        }

        if(key == 5 && tabKey5Init.value == false) {
            tabKey5Init.value = true
        }
    }

    strategyBackTestProcessApi(props.taskId).then(res => {
        console.log(res)
    })

    
</script>

<style scoped lang='scss' module>
    .container{
        display: flex;
        .left{
            width: 300px;
        }

        .right{
            flex: 1;
            margin-left: 10px;
        }
    }
</style>